<template>
  <div class="left_base_info">
    <div class="top_module">
      <el-card class="box-card" shadow="never">
        <div class="card_body">
          <div class="item_function" @click="handShowHospital" title="定点医院">
            <img src="~assets/imgHome/leftMenueImg/hosp11079.png" alt="" />
            <span>定点医院</span>
          </div>
          <div class="item_function" @click="handShowVenue" title="场馆信息">
            <img src="~assets/imgHome/leftMenueImg/venue11080.png" alt="" />
            <span>场馆信息</span>
          </div>
          <div
            class="item_function"
            @click="handShowAmbulance"
            title="车辆信息"
          >
            <img src="~assets/imgHome/leftMenueImg/ambu11078.png" alt="" />
            <span>车辆信息</span>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 保障力量 -->

    <div class="center_module">
      <el-scrollbar>
        <el-card shadow="never">
          <div class="item-function">
            <div class="power-text">保障场馆医务室</div>
            <div class="power-value">
              <span>{{ securityForces.ensureVenueMedicalClinic }}</span
              >&nbsp;个
            </div>
          </div>
        </el-card>
        <el-card shadow="never">
          <div class="item-function">
            <div class="power-text">观众医疗点</div>
            <div class="power-value">
              <span>{{ securityForces.audienceMedicalPoint }}</span
              >&nbsp;个
            </div>
          </div>
        </el-card>
        <el-card shadow="never">
          <div class="item-function">
            <div class="power-text">FOP医疗点</div>
            <div class="power-value">
              <span>{{ securityForces.FOPMedicalPoint }}</span
              >&nbsp;个
            </div>
          </div>
        </el-card>
        <el-card shadow="never">
          <div class="item-function">
            <div class="power-text">救护车</div>
            <div class="power-value">
              <span>{{ securityForces.ambulance }}</span
              >&nbsp;辆
            </div>
          </div>
        </el-card>
        <el-card shadow="never">
          <div class="item-function">
            <div class="power-text">场馆保障医生</div>
            <div class="power-value">
              <span>{{ securityForces.venueEnsureDoctor }}</span
              >&nbsp;人
            </div>
          </div>
        </el-card>
        <el-card shadow="never">
          <div class="item-function">
            <div class="power-text">护士</div>
            <div class="power-value">
              <span>{{ securityForces.nurse }}</span
              >&nbsp;人
            </div>
          </div>
        </el-card>
        <el-card shadow="never" class="drug_svg">
          <div class="item-function">
            <div class="power-text" style="line-height: 50px">药品耗材</div>
            <div class="power-value">
              <el-progress
                type="circle"
                :percentage="mypercentage"
                :status="myprocessstatus"
                style="cursor: pointer"
                title="点击查看"
                @click="handleSurplus"
              >
              </el-progress>
            </div>
          </div>
        </el-card>
      </el-scrollbar>
    </div>

    <!-- 告警信息弹窗 -->
    <warnning class="warnning" />
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
  onBeforeUnmount,
  onUnmounted,
} from 'vue';
import Warnning from './compChildMessage/Warnning';
import VueEvent from 'utils/event.js';
import {
  GetMedicalPointCount,
  GetAmbulanceCount,
  GetUserCount,
} from 'network/getBaseInfoNum';
import { GetDACInsufficient } from 'network/hosVenAmbuListData';

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue';

import { Store, useStore } from 'vuex';
import {setupMapState} from "../../../store/utils/hook"
export default {
  name: 'LeftAside',
  components: { Warnning },
  props: {
    grugVenuesStatus: {
      type: Array,
    },
    DACRequestResLength: {
      type: Number,
    },
  },
  setup(props, ctx) {
    // console.log(props);
    const store = useStore();
    const state = reactive({
      securityForces: ref({
        ensureVenueMedicalClinic: 0, //保障场馆医务室
        audienceMedicalPoint: 0, //观众医疗点
        FOPMedicalPoint: 0, //FOP医疗点
        ambulance: 0, //车辆数
        nurse: 0, //护士
        venueEnsureDoctor: 0, //场馆保障医生
        drugConsumption: 0, //药品消耗
      }),
      // 弹窗的显隐
      dialogVisible: ref(false),
      isShowHospitalDialog: ref(false),
      isShowAmbulanceDialog: ref(false),
      isShowVenueDialog: ref(false),
      isShowDrugConsumDialog: ref(false),

      // 药品耗材显示警告
      DACRequestRes: ref([]),
      mypercentage: ref(100),
      myprocessstatus: ref('success'),
      timer: ref(null),
    });
    const { ACVCodesVx } = setupMapState("app", ["ACVCodesVx"])
    const handShowHospital = () => {
      state.isShowHospitalDialog = true;
      // 子组件发射出事件，父组件中接收
      ctx.emit('handShowHospital', state.isShowHospitalDialog);
    };
    const handShowVenue = () => {
      state.isShowVenueDialog = true;
      ctx.emit('handShowVenue', state.isShowVenueDialog);
    };
    const handShowAmbulance = () => {
      state.isShowAmbulanceDialog = true;
      ctx.emit('handShowAmbulance', state.isShowAmbulanceDialog);
    };

    const handleSurplus = () => {
      state.isShowDrugConsumDialog = true;
      ctx.emit('handleSurplus', state.isShowDrugConsumDialog);
    };
    watch(
      () => state.DACRequestRes.length,
      (neww, oldw) => {},
    );
    onBeforeMount(async () => {
      // 定时调用这个方法
      const HandleDACRequest = async () => {
        try {
          state.DACRequestRes = await GetDACInsufficient(
            ACVCodesVx.value,
          );
          // console.log(state.DACRequestRes);

          if (state.DACRequestRes['list3'].length > 0) {
            state.mypercentage = 30;
            state.myprocessstatus = 'exception';
            ctx.emit('sendDACRequestRes', state.DACRequestRes['list3']); //传到父组件
          } else if (state.DACRequestRes['list2'].length > 0) {
            state.mypercentage = 70;
            state.myprocessstatus = 'warning';
            ctx.emit('sendDACRequestRes', state.DACRequestRes['list2']); //传到父组件
          } else {
            state.mypercentage = 100;
            state.myprocessstatus = 'success';
            ctx.emit('sendDACRequestRes', state.DACRequestRes['list1']); //传到父组件
          }
        } catch (error) {
          throw error;
        }
      };
      await HandleDACRequest();
      state.timer = setInterval(() => {
        HandleDACRequest();
      }, 1000 * 60); //分钟调一次 定时刷新药品耗材
    });
    onMounted(async () => {
      try {
        let activityCode =  ACVCodesVx.value.activityCode;
        let cityCode =  ACVCodesVx.value.cityCode;
        // 医疗点数量
        let medicalPoint = await GetMedicalPointCount(ACVCodesVx.value);
        // console.log(medicalPoint);
        medicalPoint.rows.forEach((element) => {
          switch (element.name) {
            case '医务室':
              state.securityForces.ensureVenueMedicalClinic = element.num;
              break;
            case 'Fop':
              state.securityForces.FOPMedicalPoint = element.num;
              break;
            case '观众':
              state.securityForces.audienceMedicalPoint = element.num;
              break;
          }
        });
        // 车数量
        let ambulanceNum = await GetAmbulanceCount( ACVCodesVx.value);
        // console.log(ambulanceNum);
        state.securityForces.ambulance = ambulanceNum.rows;

        // 人员数量
        let personNum = await GetUserCount( ACVCodesVx.value);
        // console.log(personNum);
        if (personNum.rows && personNum.rows.length > 0) {
          personNum.rows.forEach((element) => {
            // console.log(element);
            switch (element.name) {
              case '医生':
                // console.log(element.name)
                state.securityForces.venueEnsureDoctor = element.num;
                // console.log(state.securityForces.venueEnsureDoctor)
                break;
              case '护士':
                state.securityForces.nurse = element.num;
                break;
            }
          });
        }
      } catch (error) {
        throw error;
      }
    });
    onBeforeUnmount(() => {});
    onUnmounted(() => {
      console.log('map-left timer定时器清除');
      clearInterval(state.timer);
      state.timer = null;
    });
    const refState = toRefs(state);
    return {
      ...refState,
      handShowHospital,
      handShowVenue,
      handShowAmbulance,
      handleSurplus,
    };
  },
};
</script>
<style scoped>
.left_base_info {
  width: 250px;
}

.top_module .card_body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_module .card_body .item_function {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
}

.card_body .item_function span {
  width: 80px;
  text-align: center;
}

.center_module {
  margin-top: 5px;
}

.center_module .el-card {
  margin-top: 3px;
}

.center_module .item-function {
  display: flex;
  justify-content: space-between;
}

.item-function .power-value span {
  font-size: 22px;
  font-weight: 600;
}

.warnning {
  position: fixed;
  right: 570px;
  top: 66px;
}

.left_base_info .venue_dialog {
  position: absolute;
  height: 370px;
  width: 220px;
  background: #fff;
  z-index: 9;
  left: 300px;
  top: 500px;
}

:deep(.drug_svg .el-progress-circle) {
  height: 50px !important;
  width: 50px !important;
}

:deep(.drug_svg .el-card__body) {
  padding: 10px;
}

@media screen and (max-height: 908px) {
  .center_module {
    height: 420px;
  }
}

@media screen and (max-height: 820px) {
  .center_module {
    height: 345px;
  }
}
</style>
